<template>
  <div class="frame-style-panel">
    <div class="row">
      <div>{{ $t('stylePanel.frame.updateUrl') }}</div>
      <div class="space">
        <Input v-model:value="url" :placeholder="$t('stylePanel.frame.enterUrl')" />
        <Button @click="updateURL()">{{ $t('common.btnConfirm') }}</Button>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import Button from '@/components/Button.vue'
import Input from '@/components/Input.vue'
import useHistorySnapshot from '@/hooks/useHistorySnapshot'
import { useMainStore, useSlidesStore } from '@/store'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const slidesStore = useSlidesStore()
const { handleElementId } = storeToRefs(useMainStore())

const { addHistorySnapshot } = useHistorySnapshot()

const url = ref('')

const updateURL = () => {
  if (!handleElementId.value) return
  slidesStore.updateElement({ id: handleElementId.value, props: { url: url.value } })
  addHistorySnapshot()
}
</script>

<style lang="scss" scoped>
.row{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.space{
  display: flex;
  gap: 2px;
}
</style>